<template>
  <div class="container" ref="mainCon">
    <topTitle
      :titleText="titleText"
      :back="back"
      @gobackTriser="goBack"
    ></topTitle>
    <div class="mainCon noTitleExplain">
      <el-form
        :model="formData"
        label-width="124px"
        :rules="formRules"
        ref="formData"
        class="form"
      >
        <el-row class="row-padding-bottom">
          <div class="col-position mWidth">
            <el-form-item label="案件编号：" prop="caseNo">
              <el-input
                v-model="formData.caseNo"
                class="mWidth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="col-position mWidth">
            <el-form-item label="案件名称：" prop="name">
              <el-input
                v-model="formData.name"
                class="mWidth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="col-position mWidth">
            <el-form-item label="经办人员：" prop="handler">
              <el-input
                v-model="formData.handler"
                class="mWidth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="col-position mWidth">
            <el-form-item label="联系方式：" prop="contactInformation">
              <el-input
                v-model="formData.contactInformation"
                class="mWidth"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="col-position">
            <el-form-item label="案件材料：" prop="caseFiles">
              <uploadAnnex
                :limitationFactor="limitationFactor"
                @getFile="getFile"
                :upLoadFile="upLoadFileList"
              />
            </el-form-item>
            <el-row>
              <el-col :span="24">
                <uploadResult
                  style="margin-left: 124px !important"
                  :resultList="upLoadFileList"
                  @callBackResult="getFile"
                />
              </el-col>
            </el-row>
          </div>
          <div class="col-position">
            <el-form-item label="通知：" prop="">
              <el-checkbox-group v-model="noticeType">
                <el-checkbox label="1"
                  >系统消息通知(提交案件后，发送系统通知公安部门账号)</el-checkbox
                >
                <br />
                <el-checkbox label="2"
                  >短信通知(提交案件后，发送短信通知公安部门账号关联的手机)</el-checkbox
                >
              </el-checkbox-group>
            </el-form-item>
          </div>
        </el-row>
        <el-form-item class="operateBtns">
          <el-button
            class="commonBut saveBtn"
            type="primary"
            @click="saveToDetail"
            :loading="isSaveLoading"
            >申报</el-button
          >
          <el-button class="commonBut" @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  name: 'kmAddCase',
  data() {
    const checkcontactInformationOrTel = (rule, value, callback) => {
      let flag1 = 1
      let flag2 = 1
      if (!/^1[3456789]\d{9}$/.test(value)) {
        flag1 = 2
      }
      if (!/^(\d{3,4}-)?\d{7,8}$/.test(value)) {
        flag2 = 2
      }
      if (value) {
        if (flag1 == 2 && flag2 == 2) {
          callback(new Error('请输入正确的手机号或者座机号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    //缴纳凭证验证
    var checkPayUploadFile = (rule, value, callback) => {
      if (this.upLoadFileList.length === 0) {
        return callback(new Error('案件材料不能为空'))
      } else {
        callback()
      }
    }
    return {
      titleText: '添加案件',
      back: true,
      noticeType: ['1'],
      formData: {
        caseNo: '',
        name: '',
        handler: '',
        contactInformation: '',
        caseFiles: [],
      },
      isSaveLoading: false,
      formRules: {
        caseNo: [
          { required: true, message: '请输入案件编号', trigger: 'blur' },
          {
            required: true,
            min: 1,
            max: 60,
            message: '请输入1-60个字符',
            trigger: 'blur',
          },
        ],
        name: [
          { required: true, message: '请输入案件名称', trigger: 'blur' },
          {
            required: true,
            min: 1,
            max: 60,
            message: '请输入1-60个字符',
            trigger: 'blur',
          },
        ],
        handler: [
          {
            required: true,
            message: '请输入案件经办人员姓名',
            trigger: 'blur',
          },
          {
            required: true,
            min: 1,
            max: 60,
            message: '请输入1-60个字符',
            trigger: 'blur',
          },
        ],
        contactInformation: [
          { required: true, message: '请输入联系方式', trigger: 'blur' },
          {
            required: true,
            validator: checkcontactInformationOrTel,
            trigger: 'blur',
          },
        ],
        caseFiles: [
          {
            required: true,
            // message: "缴纳凭证不能为空",
            validator: checkPayUploadFile,
            trigger: 'change',
          },
        ],
      },
      upLoadFileList: [],
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 20, //自定义上传文件最大数量设置
        fileSize: 50, //自定义上传文件最大设置
        formatType: 'typeEight', //自定义上传格式校验类型
        messagetip:
          '要求格式为doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf格式，附件大小不超过50M', //自定义报错提示语
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        methodTip:
          '请上传案件材料，附件格式支持支持 doc、docx、xls、xlsx、txt、rar、zip、jpg、png、pdf，大小限制50M内，数量限制20个', //自定义上传文件提示
        uploadBtnType: 'typeEight', //自定义上传按钮类型
        messageFileSizetip: '最多能上传50M以内的附件',
      },
    }
  },
  mounted() {
    this.getFile([])
  },
  methods: {
    goBack() {
      this.$router.push('/home/kmCaseHandle/caseListJc')
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/kmCaseHandle/caseListJc',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getFile(val) {
      this.upLoadFileList = val
      this.formData.caseFiles = val
    },
    saveToDetail() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          let params = this.formData
          if (this.noticeType.includes('1')) {
            params.isNotice = 1
          } else {
            params.isNotice = 0
          }
          if (this.noticeType.includes('2')) {
            params.isMsg = 1
          } else {
            params.isMsg = 0
          }
          params.caseFiles = JSON.stringify(this.upLoadFileList)
          this.axios.post('api-r/rightscase/expand/add', params).then((res) => {
            if (!res.data.hasError) {
              this.$message({
                type: 'success',
                message: '保存成功',
              })
              this.goBack()
            } else {
              this.$message({
                type: 'warning',
                message: res.data.errorMsg,
              })
            }
          })
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
.col-position .el-input {
  width: 100%;
}
.noTitleExplain {
  padding: 40px 80px 40px 20px;
}
</style>
